﻿@using Microsoft.Extensions.Options
@using RuoVea.ExUtil
@using DailyReport.Web.Options
@inject IOptionsMonitor<SystemInfo> systemInfo;
@{
    Layout = "_Layout";
    ViewData["Title"] = "记录历程";
}

<el-timeline :reverse="reverse">
    <el-timeline-item v-for="(activity, index) in reportData" :key="index" :timestamp="activity.day" size="large" color="@systemInfo.CurrentValue.SkinColor">
        <el-card>
            <div v-html="activity.content" style="white-space: pre-wrap;max-width:480px;"></div>
        </el-card>
    </el-timeline-item>

    <el-timeline-item>
        <el-button type="primary" size="mini" style="width:100%;" :loading="loading" v-on:click="loadMore" v-if="btnShow">加载更多...</el-button>
    </el-timeline-item>
</el-timeline>

@section Scripts {
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    currentDate: new Date(),
                    rangeDate: [], 
                    reportData: [],
                    reverse: false,
                    loading: false,
                    btnShow: false,
                };
            },
            created() {
                this.cellRangeDate();
                this.handleLoadData();
            },
            methods: {
                loadMore() {
                    let dateBefore = new Date(this.currentDate);
                    dateBefore.setDate(dateBefore.getDate() - 51);
                    this.currentDate = dateBefore;
                    this.cellRangeDate();
                    this.handleLoadData();
                },
                cellRangeDate() {
                    let dateBefore = new Date(this.currentDate);
                    let dateAfter = new Date(this.currentDate);
                    dateBefore.setDate(dateBefore.getDate() - 25);
                    dateAfter.setDate(dateAfter.getDate() + 25);
                    this.rangeDate = [this.formatDate(dateBefore), this.formatDate(dateAfter)];
                },
                formatDate(date) {
                    let year = date.getFullYear();
                    let month = (date.getMonth() + 1).toString().padStart(2, '0');
                    let day = date.getDate().toString().padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },
                handleLoadData() {
                    let curry = { pageNo: 1, pageSize: 31 };
                    const [BeginTime, EndTime] = this.rangeDate;
                    var data = { ...curry, ...{ BeginTime }, ...{ EndTime } };
                    this.$http.post("/daily/pages", data).then((res) => {
                        if (res.rows.length > 0) {
                            this.btnShow = true;
                            this.reportData.push(...res.rows);
                        } else {
                            this.btnShow = false;
                        }
                    });
                },
            },
        });
    </script>
}